<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Professional portfolio showcasing my projects and skills">
    <title>John Doe | Professional Portfolio</title>
    
    <!-- Google Fonts -->
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600&family=Montserrat:wght@700&family=Fira+Code&display=swap" rel="stylesheet">
    
    <!-- Tailwind CSS CDN -->
    <script src="https://cdn.tailwindcss.com"></script>
    <!-- FontAwesome CDN -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- Custom CSS -->
    <link rel="stylesheet" href="/css/styles.css">
    
    <style>
        h1 { font-size: 2.5rem; }
        h2 { font-size: 2rem; }
        h3 { font-size: 1.5rem; }
        body { font-size: 1rem; }
    </style>
</head>
<body class="font-inter bg-white text-dark">
    <!-- Navigation -->
    <header class="sticky top-0 z-50 bg-white shadow-sm">
        <nav class="container flex items-center justify-between py-4">
            <a href="/" class="font-montserrat font-bold text-primary text-xl">JD</a>
            <div class="hidden md:flex space-x-8">
                <a href="/" class="text-primary hover:text-secondary">Home</a>
                <a href="/about.html" class="text-gray-600 hover:text-primary">About</a>
                <a href="/projects.html" class="text-gray-600 hover:text-primary">Projects</a>
                <a href="/blog.html" class="text-gray-600 hover:text-primary">Blog</a>
                <a href="/contact.html" class="text-gray-600 hover:text-primary">Contact</a>
            </div>
            <button class="md:hidden">
                <i class="fas fa-bars text-xl"></i>
            </button>
        </nav>
    </header>

    <!-- Hero Section -->
    <section class="container py-16 md:py-24">
        <div class="flex flex-col md:flex-row items-center">
            <div class="md:w-1/2 mb-8 md:mb-0">
                <h1 class="font-montserrat font-bold text-4xl md:text-5xl mb-4">Hi, I'm John Doe</h1>
                <h2 class="text-2xl md:text-3xl text-primary mb-6">Frontend Developer</h2>
                <p class="text-gray-600 mb-8 max-w-lg">
                    I build exceptional digital experiences with modern web technologies.
                    Currently specializing in React and TypeScript.
                </p>
                <div class="flex space-x-4">
                    <a href="/projects.html" class="btn btn-primary">View Projects</a>
                    <a href="/contact.html" class="btn btn-secondary">Contact Me</a>
                </div>
            </div>
            <div class="md:w-1/2 flex justify-center">
                <img src="/assets/images/profile.jpg" 
                     alt="John Doe profile photo" 
                     class="rounded-full w-64 h-64 object-cover shadow-lg"
                     loading="lazy"
                     width="256"
                     height="256">
            </div>
        </div>
    </section>

    <!-- Featured Projects -->
    <section class="bg-gray-50 py-16">
        <div class="container">
            <h2 class="font-montserrat text-3xl font-bold mb-12 text-center">Featured Projects</h2>
            <div class="grid md:grid-cols-3 gap-8">
                <!-- Project 1 -->
                <div class="card">
                    <img src="/assets/images/project1.jpg" 
                         alt="E-commerce Website" 
                         class="card-img"
                         loading="lazy">
                    <div class="card-body">
                        <h3 class="card-title">E-commerce Platform</h3>
                        <p class="card-desc">Built with React, Node.js and MongoDB</p>
                    </div>
                </div>
                
                <!-- Project 2 -->
                <div class="card">
                    <img src="/assets/images/project2.jpg" 
                         alt="Dashboard UI" 
                         class="card-img"
                         loading="lazy">
                    <div class="card-body">
                        <h3 class="card-title">Analytics Dashboard</h3>
                        <p class="card-desc">Data visualization with D3.js and Chart.js</p>
                    </div>
                </div>
                
                <!-- Project 3 -->
                <div class="card">
                    <img src="/assets/images/project3.jpg" 
                         alt="Mobile App" 
                         class="card-img"
                         loading="lazy">
                    <div class="card-body">
                        <h3 class="card-title">Fitness Tracker App</h3>
                        <p class="card-desc">React Native application with Firebase backend</p>
                    </div>
                </div>
            </div>
            <div class="text-center mt-12">
                <a href="/projects.html" class="btn btn-primary">View All Projects</a>
            </div>
        </div>
    </section>

    <!-- Skills Section -->
    <section class="py-16">
        <div class="container">
            <h2 class="font-montserrat text-3xl font-bold mb-12 text-center">Technical Skills</h2>
            <div class="flex flex-wrap justify-center gap-4">
                <div class="tag tag-primary">
                    <i class="fab fa-html5 mr-1"></i> HTML5
                </div>
                <div class="tag tag-primary">
                    <i class="fab fa-css3-alt mr-1"></i> CSS3
                </div>
                <div class="tag tag-primary">
                    <i class="fab fa-js mr-1"></i> JavaScript
                </div>
                <div class="tag tag-primary">
                    <i class="fab fa-react mr-1"></i> React
                </div>
                <div class="tag tag-primary">
                    <i class="fab fa-node-js mr-1"></i> Node.js
                </div>
                <div class="tag tag-primary">
                    <i class="fas fa-database mr-1"></i> MongoDB
                </div>
            </div>
        </div>
    </section>

    <!-- Footer -->
    <footer class="bg-dark text-white py-8">
        <div class="container">
            <div class="flex flex-col md:flex-row justify-between items-center">
                <div class="mb-4 md:mb-0">
                    <p>&copy; 2023 John Doe. All rights reserved.</p>
                </div>
                <div class="flex space-x-6">
                    <a href="https://github.com" aria-label="GitHub" class="hover:text-primary">
                        <i class="fab fa-github text-xl"></i>
                    </a>
                    <a href="https://linkedin.com" aria-label="LinkedIn" class="hover:text-primary">
                        <i class="fab fa-linkedin text-xl"></i>
                    </a>
                    <a href="https://twitter.com" aria-label="Twitter" class="hover:text-primary">
                        <i class="fab fa-twitter text-xl"></i>
                    </a>
                </div>
            </div>
        </div>
    </footer>

    <!-- Custom JS -->
    <script src="/js/app.js"></script>
</body>
</html>